<template>
    <div>
        <!-- <div>
            <button @click="printEditorHtml">print html</button>
            <button @click="insertTextHandler">insert text</button>
            <button @click="disableHandler">disable</button>
        </div> -->
        <div style="border: 1px solid #ccc; margin-top: 10px;">
            <!-- 工具栏 -->
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
            />
            <!-- 编辑器 -->
            <Editor
				ref="editor1"
                style="height: 600px; overflow-y: hidden;"
                :defaultConfig="editorConfig"
                v-model="html"
                @onChange="onChange"
                @onCreated="onCreated"
            />
        </div>
       <!-- <div style="margin-top: 10px;">
            <textarea
                v-model="html"
                readonly
                style="width: 100%; height: 200px; outline: none;"
            ></textarea>
			<div v-html="html"></div>
        </div> -->
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";
export default {
    name: 'MyEditor',
    components: { Editor, Toolbar },
    data() {
        return {
			title:null,
            editor: null,
            html: '',
            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                // excludeKeys: [ /* 隐藏哪些菜单 */ ],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                // autoFocus: false,

                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
					uploadImage:{
						server: 'http://111.43.41.101:9081/common/upload',//图片上传地址
						// server:process.env.VUE_APP_BASE_API+'/common/upload',//图片上传地址
                        allowedFileTypes: ['image/*'],
                        headers: {
                           Authorization: "Bearer " + getToken(), 
                        },
                        fieldName: 'file',
                        // 单个文件的最大体积限制，默认为 2M
                        maxFileSize: 5 * 1024 * 1024, // 1M
					},
					uploadVideo:{
						server:'http://111.43.41.101:9081/common/upload',// 上传地址
						// server:process.env.VUE_APP_BASE_API+'/common/upload',// 上传地址
                        // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
                        allowedFileTypes: ['video/*'],
                        headers: {
                           Authorization: "Bearer " + getToken(), 
                        },
                        fieldName: 'file',
                        // 单个文件的最大体积限制，默认为 10M
                        maxFileSize: 500 * 1024 * 1024, // 500M
					}
				}
            }
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
        },
        onChange(editor) {
            console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
        },
        insertTextHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.insertText(' hello ')
        },
        printEditorHtml() {
            const editor = this.editor
            if (editor == null) return
            console.log(editor.getHtml())
        },
        disableHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.disable()
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        // setTimeout(() => {
        //     this.html = ''
        // }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    },
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
